@charset "utf-8";

@mixin theme(
  $tableHeaderBgColor: #fff,// 表格表头颜色
  $tableBorderColor: #999, // 边框颜色
  $tableFontColor: #fff, // 字体颜色
  $tableBodyBgColor: #666, // 表格内容背景色
  $btnFontColor: #fff, // 按钮字体颜色
  $btnHoverFontColor: #666, // 按钮激活状态字体色
  $btnHoverBgColor: #F0F0F0, // 按钮激活状态的背景颜色
  $menuFontColor: #FFF, // 左侧菜单栏字体颜色
  $leftMenucolor: #F0F0F0, // 左侧菜单栏颜色
  $activeLeftMenucolor: #F0F0F0, // 左侧菜单栏激活的颜色
) {
  // 左侧树结构
  .el-menu.layout-menu {
    background-color: transparent !important;

    .sidebar-item-wrapper {
      .el-menu-item,
      .el-sub-menu__title {
        margin-bottom: 8px;
        border-radius: 6px;
      }

      .el-menu-item.is-active {
        color: $btnHoverBgColor;
      }

      .el-menu-item:hover,
      .el-sub-menu__title:hover {
        // color: #fff !important;
        font-weight: 600;
        background: $activeLeftMenucolor;

        .title,
        span {
          color: #000;
        }
      }

      .el-sub-menu {
        .el-menu {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          background-color: transparent;

          .el-menu-item {
            display: flex;
            justify-content: flex-start;
            width: 80%;

            // border: 1px solid red;
            // padding-left: 57px;
          }
        }
      }

      .svg-icon {
        margin-right: 16px;
        font-size: 20px;
      }
    }
  }

  // 表格
  .el-table {
    border: 1px solid $tableBorderColor;
    border-radius: 6px;

    .el-table__header {
      tr {
        th {
          color: $tableFontColor;
          background-color: $tableHeaderBgColor !important;
          border: 1px solid $tableBorderColor;
        }
      }
    }

    .el-table__body-wrapper {
      tr {
        td {
          color: $tableFontColor;
          background-color: $tableBodyBgColor !important;
          border: 1px solid $tableBorderColor;
          border-bottom: none !important;
        }
      }
    }
  }

  // 分页
  .el-pagination {
    display: flex;
    justify-content: flex-end;

    .el-pager {
      li {
        margin-right: 10px;
        border: 1px solid none;
        border-radius: 2px;

        &.is-active {
          color: $btnHoverBgColor;

          // background: $btnHoverBgColor;
        }
      }
    }

    // .btn-prev,
    // .btn-next {
    //   margin-right: 10px;
    //   border: 1px solid $borderColor;
    //   border-radius: 2px;

    //   &:active {
    //     color: #fff;
    //     background: $hoverBgColor;
    //   }
    // }
  }

  // 模态框
  .el-dialog {
    .el-dialog__header {
      .el-dialog__title {
        font-weight: 600;
      }
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;

      .m-button {
        margin-left: 8px;
      }
    }
  }

  // input
  .el-select .el-input,
  .el-input {
    width: 100%;
    outline: none;

    &.is-focus {
      .el-input__wrapper,
      .el-input__wrapper.is-focus {
        border: 1px solid $tableBorderColor;
        box-shadow: 0 0 0 1px $tableHeaderBgColor inset !important;
      }
    }

    .el-input__wrapper.is-focus {
      border: 1px solid $tableBorderColor;
      box-shadow: 0 0 0 1px $tableHeaderBgColor inset !important;
    }

    .el-input__prefix {
      color: #000;
      font-weight: bold;
    }
  }

  // el-date-editor
  .el-date-editor {
    width: 100% !important;
    height: 100% !important;

    .el-icon {
      color: #000;
      font-weight: bold;
    }
  }

  //   按钮
  .el-button {
    color: $btnHoverBgColor !important;
    font-weight: 600;
    font-size: 14px;
    font-family: PingFang, sans-serif;
    background: none !important;
    background-clip: text;
    border: 0.0625rem solid $btnHoverBgColor;

    &:hover {
      color: $btnHoverFontColor !important;
      background: $btnHoverBgColor !important;
      border: 0.0625rem solid $btnHoverBgColor;
    }
  }

  // tabs
  .el-tabs {
    .el-tabs__item {
      // background-color: red;

      &:hover {
        color: $btnHoverBgColor;
      }

      &.is-active {
        color: $btnHoverBgColor;
        font-weight: bold;
        background-color: $tableBorderColor;
      }
    }

    .el-tabs__active-bar {
      background-color: $btnHoverBgColor;
    }
  }

  // 自定义按钮
  .custom-button {
    color: $btnHoverBgColor !important;
    font-weight: 600;
    font-size: 14px;
    font-family: PingFang, sans-serif;
    background: none !important;
    background-clip: text;
    border: 0.0625rem solid $btnHoverBgColor;
    border-radius: 4px;

    &:hover {
      color: $btnHoverFontColor !important;
      background: $btnHoverBgColor !important;
      border: 0.0625rem solid $btnHoverBgColor;
      cursor: pointer;
    }
  }

  /* stylelint-disable-next-line selector-id-pattern */
  #activeItem {
    color: $btnHoverFontColor !important;
    background: $btnHoverBgColor !important;
    border: 0.0625rem solid $btnHoverBgColor;
  }
}

.white {
  @include theme;
}

/**
    1.$tableHeaderBgColor: #f3f8fe, // 表格标头背景色
    2.$tableBorderColor: #999, // 边框颜色
    3.$tableFontColor: #fff, // 字体颜色
    4.$tableBodyBgColor: #666, // 表格内容背景色
    5.$btnFontColor: #fff, // 按钮字体颜色
    6.$btnHoverFontColor: #666, // 按钮激活状态字体色
    7.$btnHoverBgColor: #F0F0F0, // 按钮激活状态的背景颜色
    8.$menuFontColor: #FFF, // 左侧菜单栏字体颜色
    9.$leftMenucolor: #F0F0F0, // 左侧菜单栏颜色
    10.$activeLeftMenucolor: #F0F0F0, // 左侧菜单栏激活的颜色
*/

.fresh {
  @include theme(#fff, #ebeef5, #333333FF, #fff, #fff, #fff,#409eff,#333333FF,#fff,#e0dede);
}

.yellow {
  @include theme(#F2D45C, #ECE0B2, #333333FF, #fff, #F2D45C, #fff,#F2D45C,#333333FF,#fff,#F2D45C);
}

.black {
  //   @include theme(#0754ad, #010924, #0754ad, #ccc, #fff, #fff, #0754ad, #0754ad, #010924, #fff);
  @include theme(#132a42, #031026, #fff, #0e1a30, #132a42, #fff,#132a42,#fff,#fff,#212a3b);
}

.pink {
  @include theme(#000, #00f, #ff0, #f00, #ccc, #0f0);
}
